<template>
  <n-card title="编辑算法参数" :bordered="false" class="h-full">
    <n-tabs type="line" animated>
      <!-- 算法信息 -->
      <n-tab-pane name="info" tab="算法信息">
        <n-card title="算法信息" class="mb-4 h-full">
          <n-form :model="algorithmInfo" label-placement="left" label-width="auto">
            <n-form-item label="算法名称">
              <n-input v-model:value="algorithmInfo.name" />
            </n-form-item>
            <n-form-item label="算法版本">
              <n-input v-model:value="algorithmInfo.version" disabled />
            </n-form-item>
            <n-form-item label="算法描述">
              <n-input
                v-model:value="algorithmInfo.description"
                type="textarea"
                :autosize="{ minRows: 3 }"
              />
            </n-form-item>
          </n-form>
        </n-card>
      </n-tab-pane>

      <!-- 算法绘制对象 -->
      <n-tab-pane name="drawObjects" tab="算法绘制对象">
        <n-card title="算法绘制对象" class="mb-4 h-full">
          <n-data-table
            :columns="drawObjectColumns"
            :data="drawObjects"
            :pagination="pagination"
          />
        </n-card>
      </n-tab-pane>

      <!-- 默认绘制样式 -->
      <n-tab-pane name="drawStyle" tab="默认绘制样式">
        <n-card title="默认绘制样式" class="h-full">
          <n-form :model="drawStyle" label-placement="left" label-width="auto">
            <n-form-item label="线条颜色">
              <n-color-picker v-model:value="drawStyle.lineColor" />
            </n-form-item>
            <n-form-item label="线条宽度">
              <n-input-number v-model:value="drawStyle.lineWidth" :min="1" :max="10" />
            </n-form-item>
            <n-form-item label="填充颜色">
              <n-color-picker v-model:value="drawStyle.fillColor" />
            </n-form-item>
            <n-form-item label="透明度">
              <n-slider v-model:value="drawStyle.opacity" :step="0.1" :min="0" :max="1" />
            </n-form-item>
          </n-form>
        </n-card>
      </n-tab-pane>
    </n-tabs>

    <!-- 操作按钮 -->
    <div class="mt-4 text-right">
      <n-button type="primary" class="mr-2" @click="handleSave">保存</n-button>
      <n-button @click="handleReset">恢复默认</n-button>
    </div>
  </n-card>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useMessage } from 'naive-ui';

const message = useMessage();

// 算法信息
const algorithmInfo = reactive({
  name: '',
  version: '1.0.0',
  description: ''
});

// 绘制对象
const drawObjects = ref([
  { id: 1, name: '对象1', type: 'Line' },
  { id: 2, name: '对象2', type: 'Circle' }
]);

const drawObjectColumns = [
  { title: '名称', key: 'name' },
  { title: '类型', key: 'type' }
];

// 分页
const pagination = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50]
});

// 默认绘制样式
const drawStyle = reactive({
  lineColor: '#000000',
  lineWidth: 2,
  fillColor: '#ffffff',
  opacity: 1
});

// 保存
function handleSave() {
  message.success('保存成功');
  // TODO: 调用保存接口
}

// 恢复默认
function handleReset() {
  algorithmInfo.name = '';
  algorithmInfo.description = '';
  drawStyle.lineColor = '#000000';
  drawStyle.lineWidth = 2;
  drawStyle.fillColor = '#ffffff';
  drawStyle.opacity = 1;
  message.info('已恢复默认设置');
}
</script>

<style scoped>
/* 确保卡片高度一致 */
.n-card.h-full {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.n-card.h-full :deep(.n-card__content) {
  flex: 1;
  overflow: auto;
}
</style>
